<template>
  <div>
    <!-- 1. @tiedan='decFn' 是自己在父组件中自定义的时间 -->
    <MyProduct
      v-for="(item,index) in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.info"
      :index="index"
      @tiedan="decFn"
    ></MyProduct>
  </div>
</template>

<script>
// 1.引入
import MyProduct from './components/MyProduct.vue'
export default {
  methods: {
    // decFn接收子组件点击事件 函数 传过来的参数即索引
    decFn(index) {
      console.log(index);
      // console.log('我是父组件内的decFn出发了');
      // 因为小数的精度问题，所以需要toFixed(2)方法保留两位小数
      this.list[index].proprice = (this.list[index].proprice - 1).toFixed(2)
    },
  },
  data() {
    return {
      list: [
        {
          id: 1,
          proname: '超级好吃的棒棒糖',
          proprice: 18.8,
          info: '开业大酬宾, 全场8折',
        },
        {
          id: 2,
          proname: '超级好吃的大鸡腿',
          proprice: 34.2,
          info: '好吃不腻, 快来买啊',
        },
        {
          id: 3,
          proname: '超级无敌的冰激凌',
          proprice: 14.2,
          info: '炎热的夏天, 来个冰激凌了',
        },
      ],
    }
  },
  // 2.局部注册
  components: {
    // MyProduct:MyProduct
    // 因为属性名和属性值一样，可简写
    MyProduct,
  },
}
</script>

<style></style>
